<template>
    <div v-if="dialogVisible" class="back">
            <!--打印区域开始-->
            <div class="print-area" ref="print">
                <div class="head">
                    <h1 class="title">陕西重型汽车进出口有限公司装箱清单</h1>
                    <h1 class="title">Packing List</h1>
                </div>

                <div class="table-container">
                    <div class="row flex">
                        <div class="cell f2">客户 CLIENT：PT INDONESIA EQUIPMENT LINE</div>
                        <div class="cell f1">日期Date：</div>
                        <div class="cell f1">{{box.packingDateStr}}</div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">销售订单  SALES ORDER：{{box.contractNumber?box.contractNumber[0]+box.batch:''}}</div>
                        <div class="cell f1">相关文件 RELATED FILES：</div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">包装箱尺寸 SIZE: {{box.volume}}</div>
                        <div class="cell f1"> 箱号 CASE.NO.: {{box.packingOrderNumber}}</div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">净重 N.W：: {{box.netWeight}}</div>
                        <div class="cell f1">毛重  G.W: {{box.grossWeight}}</div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">序号Sr.No</div>
                        <div class="cell f2">货物名称及规格 Description</div>
                        <div class="cell f2">英文名称 English Description</div>
                        <div class="cell f1">单位Unit</div>
                        <div class="cell f1">数量Quantity</div>
                    </div>

                    <div class="row flex" v-for="(item,idx) in partList" :key="item.partsId">
                        <div class="cell f1">{{idx+1}}</div>
                        <div class="cell f2">{{item.denomination}}</div>
                        <div class="cell f2">{{item.designation}}</div>
                        <div class="cell f1">件</div>
                        <div class="cell f1">{{item.quantity}}</div>

                    </div>
                    <div class="row flex">
                        <div class="cell f1">发运员  Packed by：</div>
                        <div class="cell f1" style="border-left: none">验收员 checked by ：</div>
                    </div>
                </div>
            </div>
            <!--打印区域结束-->
            <span  class="dialog-footer">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="print">打印</el-button>
          </span>

    </div>
</template>

<script>
    export default {
        name:'print',
        props: ['box', 'partList', 'dialogVisible'],
        methods: {
            print() {
                this.$print(this.$refs.print);
            }
        },
    }
</script>

<style scoped lang="scss">
    .back{
        position: fixed;
        overflow: scroll;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        background: white;
        border: 1px solid #ddd;
        box-shadow: 5px 5px 5px #ddd;
        z-index: 9999;
    }
    .print-area {
        font-size: 14px;
        border: 1px solid #000;
        width: 210mm;
        .flex{
            display: flex;
            .f1{
                flex: 1;
            }
            .f2{
                flex: 2;
            }
            .f3{
                flex: 3;
            }
            .f4{
                flex: 4;
            }
            .f7{
                flex: 7;
            }
        }
        .head{
            .title{
                height: 40px;
                line-height: 40px;
                font-size: 17px;
                border-bottom: 1px solid #000;
                margin:0;
            }
        }
        .row{
            min-height: 25px;
            line-height: 25px;
            border: 1px solid #000;
            .cell{
                border-left:1px solid #000000;
            }
        }
    }

    @media print {
        html, body {
            text-align: center;
            width: 210mm;
            /*height: 210mm;*/
        }
        .print-area {
            text-align: center;
            font-size: 14px;
            border: 1px solid #000;
            width: 210mm;
            .flex{
                display: flex;
                .f1{
                    flex: 1;
                }
                .f2{
                    flex: 2;
                }
                .f3{
                    flex: 3;
                }
                .f4{
                    flex: 4;
                }
                .f7{
                    flex: 7;
                }
            }
            .head{
                .title{
                    height: 40px;
                    line-height: 40px;
                    font-size: 17px;
                    border-bottom: 1px solid #000;
                    margin:0;
                }
            }
            .row{
                min-height: 25px;
                line-height: 25px;
                border: 1px solid #000;
                .cell{
                    border-left:1px solid #000000;
                }
            }
        }
    }
</style>